<template>
  <div class="app-container">
    <!--  -->
    <HmiOnlySelect
      :show-setting-zone="showSettingZone"
      :page-size="20"
      @data-loaded="handleDataLoaded"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useHmiConfigStore, useSettingZoneStore } from "@/store";
import HmiOnlySelect from "@/components/HmiOnlySelect/index.vue";
import type { HmiOnlySelectRow } from "@/components/HmiOnlySelect/types";

defineOptions({
  name: "HmiOnlySelect",
  inheritAttrs: false,
});

// Store
const hmiConfigStore = useHmiConfigStore();
const settingZoneStore = useSettingZoneStore();

// 计算是否显示定值区（暂时设为 false，因为 OnlySelectOptions 中没有此配置）
const showSettingZone = computed(() => {
  return false;
});

const settingZoneApi = computed(() => {
  return "";
});

// 事件处理
function handleDataLoaded(data: HmiOnlySelectRow[]) {
  console.log("数据加载完成:", data);
}

function handleSelectionChange(selection: HmiOnlySelectRow[]) {
  console.log("选择变更:", selection);
}

function handleRowClick(row: HmiOnlySelectRow) {
  console.log("行点击:", row);
}

function handleError(error: Error) {
  // ElMessage.error(`操作失败: ${error.message}`);
  console.error("操作失败:", error);
}

// 初始化
onMounted(async () => {
  try {
    await hmiConfigStore.initHmiConfig();
    if (showSettingZone.value) {
      await settingZoneStore.fetchSettingZoneInfo(settingZoneApi.value);
    }
  } catch (error) {
    console.error("初始化失败:", error);
    ElMessage.error("初始化配置失败");
  }
});
</script>

<style scoped>
.app-container {
  padding: 20px;
  height: 100%;
}
</style>
